<html>
 <head>
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(47,0);
                ctx.lineTo(53,0);
                ctx.lineTo(50,15);
                /*ctx.arc(5,5,5,Math.PI,3*Math.PI/2, false);
                ctx.lineTo(95,0);
                ctx.arc(95,5,5,3*Math.PI/2,2*Math.PI, false);
                ctx.lineTo(100,45);
                ctx.arc(95,45,5,0,Math.PI/2, false);
                ctx.lineTo(5,50);
                ctx.arc(5,45,5,Math.PI/2, Math.PI, false);
                ctx.lineTo(0,5);*/
                ctx.fillStyle = "#1F497D";  
                ctx.fill();
      }
    }
	
	var State = function(inputObj) {
		this.name = inputObj.name;
		this.status = inputObj.status;
	}
	
	State.colors = {
		completed : {
			background : "#548DD4",
			border : "#1F497D"
		},
		active : {
			background : "9BBB59",
			border : "4E6128"
		},
		notreached : {
			background : "#C6D9F1",
			border : "#8DB3E2"
		}
	}
	State.prototype = (function () {
		var draw = function () {
			
		}
		
		return {
			draw : draw
		}
	})();
  </script>
  <style>
  	.workflow-table td {
  		border : 1px solid black;
	}
	
	.workflow-state {
	  text-align: center;
	  color : #ffffff;
	  vertical-align: middle;
	  font-family: arial,helvetica;
	  cursor: default;	  
	  -moz-border-radius: 5px;
	  -webkit-border-radius : 5px;
	  font-size : small;
	  font-weight : bold;
	}
	
	.state-completed {
		border: 3px solid #1F497D;
		background-color: #548DD4;
	}
	
	.state-active {
		border: 3px solid #4E6128;
		background-color: #9BBB59;
	}
	
	.state-notreached {
		border: 3px solid #8DB3E2;
		background-color: #C6D9F1;
	}	
  </style>
 </head>
 <body onload="draw()">
   <canvas id="canvas" width="100" height="15"></canvas>
   <table class="workflow-tabl" cellspacing=0>
   	<tbody>
   		<tr style="height:15px">
   			<td style="width:10px"></td>
			<td style="width:15px"></td>
			<td style="width:15px"></td>
			<td style="width:50px"></td>
			<td style="width:50px"></td>
			<td style="width:15px"></td>
			<td style="width:15px"></td>
			<td style="width:10px"></td>
   		</tr>
   		<tr style="height:25px">
   			<td></td>
			<td></td>
			<td></td>
			<td colspan=2 rowspan=2 class="workflow-state state-completed">CREATION</td>
   			<td></td>
			<td></td>
			<td></td>
   		</tr>
   		<tr style="height:25px">
   			<td></td>
			<td></td>
			<td></td>
   			<td></td>
			<td></td>
			<td></td>
   		</tr>	
   		<tr style="height:35px">
   			<td></td>
			<td></td>
			<td></td>
			<td></td>
   			<td></td>
			<td></td>
			<td></td>
			<td></td>
   		</tr>						
   	</tbody>
   </table>
 </body>
</html>